<template>
	<view class="h100 column">
		<view class="justify-end align-center pt19 pr36" v-if="listData.length>0" @click="readAllMessage">
			<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/message/all-read.png" size="26rpx"></u-icon>
			<view class="pl5 fs28 pb5">全部已读</view>
		</view>
		<scroll-view scroll-y class="flex-1 hidden plr30 border-box" :refresher-enabled="scrollViewTool.isEnabled"
			refresher-background="rgba(0,0,0,0)" :refresher-triggered="scrollViewTool.triggered"
			@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false"
			@refresherabort="triggered = false" @scrolltolower="reachBottom">
			<view class="column" v-if="listData.length>0">
				<view class="" v-for="item in listData" :key="item.id">
					<view class="mt9 mb12 fs26 color9 text-center">2025-04-14 09:48</view>
					<view class="bgf radius20 plr28 ptb20 border-box">
						<view class="fs28" style="color: #ff2121">系统通知</view>
						<view class="radius10 plr20 ptb25 border-box mt23" style="background-color: #f4f5f9">xxxxx</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</view>
			<view class="flex-1 hb centerV" v-else>
				<fr-empty-message />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList';
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		messageList,
		readAll
	} from '@/api/message/index';
	import {
		showToast
	} from '@/core/app';
	const {
		listData,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} = useLoadPageList(messageList, {
		type: 1
	});
	onShow(() => {
		reSetList()
	})

	const readAllMessage = async () => {
		let res = await readAll()
		if (res) {
			reSetList()
		}
	}
</script>

<style scoped lang="scss"></style>